<!doctype html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<style type="text/css">
		body,ul,ol,li,img{margin:0;padding:0;list-style:none;}
		#box{width:490px;height:170px;padding:5px;
			position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;}
		.ad{width:490px;height:170px;overflow:hidden;position:relative;}
		#box img{width:490px;}
		.ad ol{position:absolute;right:10px;bottom:10px;}
		.ad ol li{width:20px;height:20px;line-height:20px;border:1px solid #ccc;text-align:center;background:#fff;float:left;margin-right:10px;cursor:pointer;_display:inline;}
		.ad ol li.current{background:yellow;}
		.ad ul li{float:left;}
		.ad ul{ position:absolute; top:0; width:2940px;}
		.ad ul li.current{display:block;}
		#arr {display: none;}
		#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
		#arr #right{right:5px; left:auto;}
	</style>
</head>
<body>
<div id="box" class="all">
	<div class="ad">
		<ul id="imgs">
			<li><img src="images/1.jpg" /></li>
			<li><img src="images/2.jpg" /></li>
			<li><img src="images/3.jpg" /></li>
			<li><img src="images/4.jpg" /></li>
			<li><img src="images/5.jpg" /></li>
		</ul>
	</div>
	<div id="arr">
		<span id="left"><</span>
		<span id="right">></span>
	</div>
</div>


<script>
	//需求:鼠标放到盒子上,显示左右切换的图片.点击左侧按钮,图片(ul)向右移动,相反按钮向左移动.
	//思路:获取两个按钮,点击左侧按钮移动ul向右走(每次只走一张图片)(计数器从0开始)
			//如何移动盒子,利用计数器模拟index值,点右侧自增,点左侧自减.
	//步骤:
	//1.鼠标放上去显示移开隐藏
	//2.点击右侧盒子图片向左移动,并用计数器模拟index值
	//3.点击左侧盒子,同理;
	
	//1.鼠标放上去显示移开隐藏
	var box = document.getElementById("box");
	var imgWidth = box.children[0].offsetWidth;
	var ul = box.children[0].children[0];
	var boxLeftRight = box.children[1];
	var btnArr = boxLeftRight.children;
	
	box.onmouseover = function(){
		boxLeftRight.style.display = "block";
	}
	box.onmouseout = function(){
		boxLeftRight.style.display = "none";
	}
	//2.点击右侧盒子图片向左移动,并用计数器模拟index值
	//定义计数器
	
	var index = 0;
	btnArr[1].onclick = function(){
		index++;
		//我们要对index的值进行约束,index的值必须在[0，4]
		if(index>ul.children.length-1){
			index = ul.children.length-1;
			alert("到头了");
		}
		//点击盒子以后移动图片(ul，和目标位置)
		animate(ul,-index*imgWidth);
	}
	btnArr[0].onclick = function(){
		index--;
		if(index<0){
			index = 0;
			alert("第一张");
		}
		animate(ul,-index*imgWidth);
	}
	//3.点击左侧盒子,同理;
	function animate(ele,target){
		//要用定时器，先清除定时器
		//一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
		//而定时器本身讲成为盒子的一个属性
		clearInterval(ele.timer);
		//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
		//目标值如果大于当前值取正，目标值如果小于当前值取负
		var speed = target>ele.offsetLeft?10:-10;
		ele.timer = setInterval(function(){
			//在执行之前就获取当前和目标值之差
			var val = target - ele.offsetLeft;
			ele.style.left = ele.offsetLeft + speed + "px";
			if(Math.abs(val)<Math.abs(speed)){
				ele.style.left = target+"px";
				clearInterval(ele.timer);
			}
		},10);
	}
</script>

</body>
</html>

